<template>
  <div class="music-list">
    <!-- 返回键 -->
    <div class="back" @click="back">
        <div class="icon-back"></div>
    </div>
    <!--内容 -->
    <h1 class="title">{{title}}</h1>
    <!--引入背景图样式 -->
    <div class="bg-image" :style="bgStyle" ref="bgImage">
      <!--随机播放 -->
      <div class="play-wrapper">
        <!--判断当歌手列表数据全部加载出来 -->
        <div class="play" v-show="songs.length > 0" ref="playBtn">
            <i class="icon-play"></i>
            <span class="text">随机播放全部</span>
        </div>
      </div>
      <!--背景图添加蒙层效果 ref='filter'处理淡化的效果 -->
      <div class="filter" ref="filter"></div>
    </div>
    <!--添加layer层,推送列表歌曲向上的效果 -->
    <div class="bg-layer" ref="layer"></div>
    <!--滚动scroll组件 设置@scroll事件  -->
    <scroll :probe-type ="probeType" :listen-scroll="listenScroll" @scroll="scroll" :data="songs" class="list" ref="list">
      <!--song组件的内部样式 -->
      <div class="song-list-wrapper">
        <!--歌曲列表子组件 selectItem来自song-list组件的派发事件  -->
        <song-list @selectItem ="selectItem" :songs="songs"></song-list>
      </div>

     <!--加载loading组件 -->
      <div class="loading-container" v-show="!songs.length">
        <loading></loading>
      </div>

    </scroll>
  </div>
</template>

<script>
import scroll from '@/components/base/scroll/scroll.vue';
import songList from '@/components/song-list/song-list.vue';
import loading from '@/components/base/loading/loading.vue';
// 代理操作actions.js中的相关操作
import {mapActions} from 'vuex';

const RESERVED_HEIGHT = 40; //预留到顶部的距离

export default {
  props: {
    songs: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: '' 
    },
    bgImage: {
      type: String,
      default: ''
    }
  }, 
  data() {
    return {
      listenScroll: true,// 开启监听
      probeType: 3, // 设定BS 实时监测滚动位置
      scrollY:0,
    };
  },
  computed: {
    bgStyle() {
      return `background-image:url(${this.bgImage})`;
    }
  },
  components: {
    scroll,
    songList,
    loading
  },
  methods: {

      // 来自@scroll=“scroll”,派发监听scroll事件
      scroll(pos) {
        console.log('监听事件scroll滚动的position.y的高度',pos.y);
        this.scrollY = pos.y;
      },

      //返回
      back() {
        this.$router.back();
      },

      // 设置fullScreen展示模式,playList的数据 item相等于一首歌
      selectItem(item, index) {
        // selectPlay()方法来自mapActions定义的方法
        // 通过歌手详情页this.$emit()派发事件到music-list组件中--->提交actions--->通过mutations修改state的状态--->
        // 通过getters()将数据映射到player组件中，然后dom渲染到页面上---->player组件的展示通过playlist的数据是否存在
        this.selectPlay({
          item: this.songs,
          index
        })
      },

      // 操作actions中的相关设置， 修改actions.js通过commit()进行提交SET_PLAYING_STATE状态修改
      ...mapActions([
        'selectPlay'
      ])
  },
  mounted() {
    // 高度自适应为图片背景图的高度
    console.log('歌曲列表的top高度值 ',this.$refs.list);
    // 图片的最大高度---控制bg-layer层的最大高度
    this.imageHeight = this.$refs.bgImage.clientHeight;
    // 最小高度
    this.minTranslateY = - this.imageHeight + RESERVED_HEIGHT;
    this.$refs.list.$el.style.top = `${this.imageHeight}px`
  },
  watch: {
    //检测scrollY的变化从而更新layer层的高度
    scrollY(newVal) {
      let translateY = Math.max(this.minTranslateY,newVal);
      console.log('滚动时minTranslateY的固定值 ', this.minTranslateY,  '滚动时newVal实时变化值 ',newVal,'取两者的最大值translateY的值 ', translateY);
      // 输出的结果: 滚动时minTranslateY的值  -224 滚动时newVal的值  -1616.36 取两者的最大值translateY的值  -224
      // 输出的结果: 滚动时minTranslateY的值  -224 滚动时newVal的值  -30 取两者的最大值translateY的值  -30
      console.log('检测scrollY的变化从而更新layer层的高度');
      this.$refs.layer.style['transform'] = `translate3d(0,${translateY}px,0)`; //translate3d(x,y,z) 定义 3D 转换。

      //改变样式添加z-index,高度的重新设值
      let zIndex = 0;
      let scale = 1; // 下拉列表内容无缝连接放大图片 通过样式transform: scale(1);进行控制
      let blur = 0; // 向上推移时,图片有淡化的效果 

       //算法技术
       const percent = Math.abs( newVal / this.imageHeight);
       //未拖到的值： 通过计算percent的值 0 newVal的值 0 this.imagHeight的值 224
       console.log('通过计算percent的值',percent,'newVal的值',newVal,'this.imagHeight的值', this.imageHeight);
       //改变输出的值: 通过计算percent的值 0.0007398214285714286 newVal的值 0.16572 this.imagHeight的值 224
      if(newVal > 0) {
         scale =  1 + percent;
         zIndex = 10;
      }else {
         blur = Math.min(20 * percent,20); // 淡化的效果
         console.log('backdrop-filter实现类似iOS系统中那种高斯模糊效果',blur);
      } 
        this.$refs.filter.style['backdrop-filter'] = `blur(${blur}px)`;

       this.$refs.bgImage.style['transform'] = `scale(${scale})`; //scale(x,y)定义 2D 缩放转换。
       this.$refs.bgImage.style.zIndex = zIndex; // 此样式的重点在于下拉的时候背景不易被歌手列表覆盖

      if(newVal < this.minTranslateY) {
        // 超过顶部预留40px的高度 滚动时minTranslateY的固定值  -184 滚动时newVal实时变化值  -1648 取两者的最大值translateY的值  -184
        zIndex = 10;
        this.$refs.bgImage.style.paddingTop = 0;
        this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`;//设值固定高度
        this.$refs.bgImage.style.zIndex = zIndex;

        //随机播放按钮
        this.$refs.playBtn.style.display = 'none';

      }else {
        // 还原之前的高度 滚动时minTranslateY的固定值  -184 滚动时newVal实时变化值  0.0891839 取两者的最大值translateY的值  0.0891839
        this.$refs.bgImage.style.paddingTop = '70%';
        this.$refs.bgImage.style.height = 0;
        this.$refs.bgImage.style.zIndex = zIndex;

         //随机播放按钮
        this.$refs.playBtn.style.display = '';
      }
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
@import "@/assets/style/mixin.scss";

.music-list {
  position: absolute;
  top: -88px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #fff;
  .back {
    position: absolute;
    top:0;
    left: 6px;
    z-index: 50;
    .icon-back {
      display: block;
      padding: 10px;
      color: #f01414;
      font-size: 14px;
    }
  }
  .title {
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 50;
    font-size: 14px;
    width: 80%;
    text-align: center;
    line-height: 40px;
    color: #f80000;
  }
  .bg-image {
    position: relative;
    width: 100%;
    height: 0;//自适应高度
    padding-top: 70%; // 需要将使用padding-top进行设置 ，控制宽高为10:7的比例 
    background-size: cover; // background-size 属性，是规定背景图像的尺寸，cover属性值是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
    transform-origin: top; // transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转
    .play-wrapper {
      position: absolute;
      width: 100%;
      bottom: 20px;
      z-index: 40;
      .play {
        box-sizing: border-box;
        padding: 7px 0;
        width: 135px;
        margin: 0 auto;
        text-align: center;
        border: 1px solid #ffcd32;
        border-radius: 100px;
        color: #ffcd32;
        font-size: 0;
        .icon-play {
          display: inline-block;
          vertical-align: middle;
          font-size: 12px;
          margin-right: 6px;
        }
        .text {
          display: inline-block;
          vertical-align: middle;
          font-size: 12px;
        }
      }


    }
    .filter {
      position: absolute;
      top: 0; // 右侧
      left: 0; // 左侧
      width: 100%;
      height: 100%;
      background: rgba(7, 17, 27, 0.4);
    }
  }
  .bg-layer {
    position: relative;
    height: 100%;
    background: #fff;
  }
  .list {
    position: fixed; 
    top: 0;
    bottom: 0;
    width: 100%;
    // overflow: hidden; // 隐藏超出的部分
    .song-list-wrapper {
      padding: 20px 30px;
    }
  }
}
</style>

